<template>
  <div class="warp">
    <el-button :type="buttonType" @click="showDialog" size="mini">{{
      text
    }}</el-button>
    <el-dialog
      :title="title"
      destroy-on-close
      :visible="isShow"
      :width="size"
      :close-on-click-modal="false"
      @close="handleClose"
      append-to-body
    >
      <span>
        <div>
          <slot></slot>
        </div>
      </span>
      <span
        slot="footer"
        class="dialog-footer"
        v-if="btnShow == '1' ? false : true"
      >
        <el-button @click="cancelHandel">取消</el-button>
        <el-button type="primary" @click="submitHandel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TextDialog",
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    text: [String],
    buttonType: {
      type: String,
      default() {
        return "text";
      },
    },
    type: {
      type: String,
      default() {
        return "1"; //1 表示不显示 底部按钮 其他代表显示底部按钮
      },
    },
    size: [String],
    btnShow: [String],
    title: [String],
  },
  data() {
    return {
      newIsShow: false,
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    showDialog() {
      // this.isShow = true;
      this.$emit("showDialog");
    },
    // 关闭弹窗
    handleClose() {
      this.$emit("closeDialog");
    },
    // 提交
    submitHandel() {
      if (this.btnShow == "2") {
        this.$emit("closeDialogSubmit");
      }
    },
    // 取消
    cancelHandel() {
      if (this.btnShow == "2") {
        this.$emit("cancelHandel");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.warp {
  display: inline;
}
</style>
